<template>
  <div>
    <h2>病虫害图像智能识别</h2>
  <div class="uplpad-box">
    <el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary" icon="el-icon-camera">上传一张试试</el-button>
  <div slot="tip" class="el-upload__tip">只能上传png/jpg/gif/jpeg'文件，且不超过500mb</div>
</el-upload>
  </div>
  <div class="load">
 <div class="isImg">
  <img src="https://img1.baidu.com/it/u=591253165,2678614930&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1671210000&t=f82b882523075276490cf3342fdbb63b" alt="">
 </div>
 <div class="box2">
  <i class="el-icon-caret-right"></i>
 </div>
 <div class="box3">
  <div>
    识别结果：
  </div>
  <div class="chong">
    动物 昆虫 美国白蛾 雌性
  </div>
  <div>
    （90%可信度）
  </div>
  <div class="keneng">
    其它可能性：
  </div>
  <div>
    <span class="isspan">美国白蛾 成虫</span>
    （10%可信度）
  </div>
  <div>
    <span class="isspan">美国白蛾 成虫</span>（10%可信度）
  </div>
  <div>
    <span class="isspan">美国白蛾 成虫</span>（10%可信度）
  </div>
  <div>
    <span class="isspan">美国白蛾 成虫</span>（10%可信度）
  </div>
  <div>
    <span class="isspan">美国白蛾 成虫</span>（10%可信度）
  </div>
 </div>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: []
      // fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
    }
  },
  methods: {
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style lang="less" scoped>
h2{
  text-align: center;
  margin-top: 2vh;
}
.uplpad-box{
  margin-left: 45%;
  // margin: auto;
  margin-top: 2vh;
  // transform: translate(50%);
}
.isImg{

  img{
    width: 380px;
  height: 250px;
  }
}
.el-icon-caret-right{
  font-size: 40px;
}
.load{
  display: flex;
  justify-content: space-evenly;
  width: 50%;
  margin: auto;
  align-items: center;
  margin-top: 2vh;

  .box3{
    width: 380px;
  height: 250px;
    background-color:#dddddd;
    text-align: center;
  }
.chong{
  font-size: 20px;
}
.keneng{
  font-size: 14px;
  color:#808080;
}
.isspan{
  font-size: 18px;
  color: #7bb8f6;
}
}
</style>
